<template>
<div class="extract">
  <el-tabs type="border-card"  class="extract-tabs"  v-model="activeName"  @tab-click="handleClickTab">
    <el-tab-pane name="1">
      <span slot="label"><i class="el-icon-success"></i> 设置抽取条件</span>
      <ReviewCondition v-if="isCondition"/>
    </el-tab-pane>
    <el-tab-pane name="2" >
      <span slot="label"><i class="el-icon-error"></i> 设置回避条件</span>
      <ReviewAvoid v-if="isAvoid"/>
    </el-tab-pane>
    <el-tab-pane label="抽取专家" name="3">
      <span slot="label"><i class="el-icon-s-claim"></i>抽取专家</span>
    <ReviewExtract v-if="isExtract"/>
    </el-tab-pane>
  </el-tabs>
</div>
</template>
<script>
import ReviewCondition from '@/components/review/ReviewCondition.vue'
import ReviewAvoid from '@/components/review/ReviewAvoid.vue'
import ReviewExtract from '@/components/review/ReviewExtract.vue'
export default {
  components:{
    ReviewCondition,
    ReviewAvoid,ReviewExtract
  },

  data(){
    return{
      activeName:'1',
      isCondition:true,
      isAvoid:false,
      isExtract:false
    }
  },
  provide(){
    return{
      changeTab:(name)=>this.changeTabs(name)
    }
  },
  methods: {
    handleClickTab(tab) {
      this.changeTabs(tab.name)
    },
    changeTabs(name){
      this.activeName=name
      if (name === '1') {
        this.isCondition = true
        this.isAvoid = false
        this.isExtract=false
      } else if (name === '2') {
        this.isCondition = false
        this.isAvoid = true
        this.isExtract=false
      }else if (name==='3'){
        this.isCondition =false
        this.isAvoid = false
        this.isExtract=true
      }
    }
  }
}
</script>
<style scoped lang="less">

// el-tabs样式美化
::v-deep .el-tabs--border-card{
  background-color: transparent;
  border: none;
  box-shadow: none;
  -webkit-box-shadow:none;
}
::v-deep .el-tabs--border-card > .el-tabs__header{
  background-color: transparent;
  border-bottom: none;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item{
  margin-left: 8px;
  border: none;
  border-radius: 8px 8px 0 0;
  background-color: rgba(64, 158, 255, 0.1);
  padding: 4px 20px;
  color:#409EFF;
  line-height: 22px;
  height: 30px;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{
  background-color: #409EFF;
  color: #ffffff;
}
::v-deep .el-tabs__content{
  padding-top: 0;
  background-color: #ffffff;
  border-radius: 5px;
  border: #DCDFE6 1px solid;
  border-top: none;
}
</style>
